<template>
  <div class="sysdesc_container">
    <div class="sd_close" @click="goback">
      <i class="icon el-icon-right"></i>
    </div>
    <div class="sd_wrap">
      <h3>{{sysdesc.title}}</h3>
      <div class="sd_row">
        <sdCol v-for="(item, index) in sysdesc.info" :key="index" :lab="item.lab" :desc="item.desc"></sdCol>
      </div>
    </div>
    <div class="sd_wrap">
      <h3>{{aboutdesc.title}}</h3>
      <div class="sd_row">
        <sdCol v-for="(item, index) in aboutdesc.info" :key="index" :lab="item.lab" :desc="item.desc"></sdCol>
      </div>
    </div>
  </div>
</template>

<script>
import { getversion } from '@/api/api.js'
import { getAppJson } from '@/utils/versionReload'
// 定义信息模板组件
const sdCol = {
  props: ['lab', 'desc'],
  template: `
    <div class="sd_col">
      <div class="sd_lab">
        <i class="icon"></i>
        <span>{{lab}}</span>
      </div>
      <div class="sd_txt">
        <p v-for="(txt,index) in desc" :key="index">{{txt}}</p>
      </div>
    </div>
  `
}
export default {
  name: 'Sysdescription',
  components: { sdCol },
  props: {
    close: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      sysdesc: {
        title: '系统信息：',
        info: [
          {
            lab: '系统名称：',
            desc: [window.g.TITLE || '医技检查预约平台']
          },
          {
            lab: '产品编码：',
            desc: [window.g.APPCODE ? window.g.APPCODE : 'Kayi_MTAT016FE']
          },
          {
            lab: '系统版本：',
            desc: ['1.0.0']
          },
          {
            lab: '接口版本：',
            desc: ['']
          },
          {
            lab: '技术支持：',
            desc: ['浙江卡易智慧医疗科技有限公司']
          }
        ]
      },
      aboutdesc: {
        title: '关于我们：',
        info: [
          {
            lab: '公司名称：',
            desc: ['浙江卡易智慧医疗科技有限公司']
          },
          {
            lab: '公司地址：',
            desc: ['温州市龙湾区蒲州街道汤车路55号汤锦园商业办公楼1号楼12、12A层（办公地址）', '温州经济技术开发区兰江路188号B幢2013、2015室（注册地址）']
          },
          {
            lab: '400电话：',
            desc: ['400-108-1882']
          },
          {
            lab: '公司座机：',
            desc: ['0577-88815996']
          },
          {
            lab: '公司传真：',
            desc: ['0577-88815960']
          },
          {
            lab: '合作邮箱：',
            desc: ['418844010@qq.com']
          },
          {
            lab: '公司网址：',
            desc: ['www.kayisoft.com']
          }
        ]
      }
    }
  },
  created() {
    this.getApiVersion()
    this.getAppVersion()
    console.log('===getAppVersion===')
  },
  methods: {
    getApiVersion() {
      if (this.$store.state.user.hospitalCode) {
        let app = this.$store.state.user.appSetting
        this.renderApiName(app.apiName)
      } else {
        getversion().then(res => {
          if (res) {
            this.renderApiName(res.content)
          }
        })
      }
    },
    renderApiName(txt) {
      const _sysdesc = this.sysdesc
      const idx = _sysdesc.info.findIndex(item => item.lab === '接口版本：')
      if (idx >= 0) {
        _sysdesc.info[idx]['desc'][0] = txt
      }
      _sysdesc.info = _sysdesc.info.filter(item => !!item.desc[0])
      this.sysdesc = JSON.parse(JSON.stringify(_sysdesc))
    },
    async getAppVersion() {
      try {
        const res = await getAppJson()
        console.log('getAppVersion_res', res)
        if (res && res.data && res.data.version) {
          const _sysdesc = this.sysdesc
          const idx = _sysdesc.info.findIndex(item => item.lab === '系统版本：')
          if (idx >= 0) {
            _sysdesc.info[idx]['desc'][0] = res.data.version
          }
          this.sysdesc = JSON.parse(JSON.stringify(_sysdesc))
        }
      } catch (err) {
        console.log(err)
      }
    },
    goback() {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.sysdesc_container{
  padding: 20px 60px;
  position: relative;
  .sd_wrap{
    margin-bottom: 50px;
    h3{
      font-weight: 500;
      font-size: 24px;
      margin: 30px 0;
    }
  }
  .sd_close{
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 10;
    font-size: 20px;
    cursor: pointer;
  }
  .sd_close:hover .icon{
    color: #085BFF;
  }
}
.sd_row >>> .sd_col{
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  margin: 10px 0;
  .sd_lab{
    float: left;
    width: 110px;
    color: rgba(0,0,0,0.6);
    margin: 4px 0;
    .icon{
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: solid 1px #085BFF;
      margin-right: 4px;
      vertical-align: 1px;
    }
  }
  .sd_txt{
    float: left;
    color: #333;
    line-height: 26px;
  }
  p{
    margin: 0;
  }
}
</style>
